<template>
  <div class="page-header">
    <div class="header-left">
      <h1 class="page-title">银行流水管理</h1>
      <div class="status-badges">
        <el-tag type="primary" class="total-badge">
          <el-icon><Money /></el-icon>
          总流水: {{ stats.totalTransactions }}
        </el-tag>
        <el-tag type="warning" class="unmatched-badge">
          <el-icon><Clock /></el-icon>
          未匹配: {{ stats.unmatchedTransactions }}
        </el-tag>
        <el-tag type="success" class="matched-badge">
          <el-icon><Checked /></el-icon>
          已匹配: {{ stats.matchedTransactions }}
        </el-tag>
        <el-tag type="danger" class="filtered-badge">
          <el-icon><Filter /></el-icon>
          已过滤: {{ stats.filteredTransactions }}
        </el-tag>
      </div>
    </div>
    
    <div class="header-actions">
      <!-- 导入流水 -->
      <el-button 
        type="primary" 
        :icon="Upload" 
        @click="showImportWizard"
      >
        导入银行流水
      </el-button>
      
      <!-- 智能捕获 -->
      <el-button 
        :icon="MagicStick" 
        @click="handleSmartCapture"
        :loading="capturing"
      >
        智能捕获
        <el-tooltip content="通过智能算法自动捕获银行流水，无需手动导入" placement="top">
          <el-icon class="help-icon"><QuestionFilled /></el-icon>
        </el-tooltip>
      </el-button>
      
      <!-- 批量操作 -->
      <el-button 
        :icon="Operation" 
        @click="showBatchOperations"
        :disabled="selectedTransactions.length === 0"
      >
        批量操作 ({{ selectedTransactions.length }})
      </el-button>
      
      <!-- 智能过滤 -->
      <el-button 
        :icon="Filter" 
        @click="showSmartFilter"
      >
        智能过滤
      </el-button>
      
      <!-- 导出流水 -->
      <el-button :icon="Download" @click="exportTransactions">
        导出流水
      </el-button>
      
      <!-- 刷新数据 -->
      <el-button 
        :icon="Refresh" 
        @click="loadTransactions"
        :loading="loading"
      >
        刷新
      </el-button>
    </div>
  </div>

  <!-- 统计概览 -->
  <el-row :gutter="16" class="stats-row">
    <el-col :xs="24" :sm="6">
      <StatCard
        title="今日流水"
        :value="stats.todayTransactions"
        icon="Calendar"
        color="#1890ff"
        :trend="stats.todayTrend"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="本月流水金额"
        :value="stats.monthlyAmount"
        prefix="¥"
        icon="TrendCharts"
        color="#52c41a"
        :trend="stats.amountTrend"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="自动匹配率"
        :value="stats.autoMatchRate"
        suffix="%"
        icon="MagicStick"
        color="#fa8c16"
        :trend="stats.matchTrend"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="数据质量评分"
        :value="stats.dataQualityScore"
        icon="Star"
        color="#722ed1"
        :trend="stats.qualityTrend"
      />
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { 
  Money, Clock, Checked, Filter, Upload, MagicStick, Operation, 
  Download, Refresh, QuestionFilled
} from '@element-plus/icons-vue'
import StatCard from '@/components/StatCard.vue'

// 定义组件props
const props = defineProps<{
  stats: {
    totalTransactions: number
    unmatchedTransactions: number
    matchedTransactions: number
    filteredTransactions: number
    todayTransactions: number
    monthlyAmount: number
    autoMatchRate: number
    dataQualityScore: number
    todayTrend: number
    amountTrend: number
    matchTrend: number
    qualityTrend: number
  }
  loading: boolean
  capturing: boolean
  selectedTransactions: any[]
  viewMode: string
  showAdvancedFilter: boolean
}>()

// 定义组件emits
const emit = defineEmits<{
  (e: 'showImportWizard'): void
  (e: 'showBatchOperations'): void
  (e: 'showSmartFilter'): void
  (e: 'loadTransactions'): void
  (e: 'exportTransactions'): void
  (e: 'handleSmartCapture'): void
  (e: 'search'): void
  (e: 'reset'): void
  (e: 'toggleFilter'): void
  (e: 'viewModeChange', value: string): void
  (e: 'import'): void
  (e: 'smartFilter'): void
  (e: 'batchAction'): void
}>()

// 计算属性

// 方法
const showImportWizard = () => {
  console.log('showImportWizard called')
  emit('showImportWizard')
}

const showBatchOperations = () => {
  emit('showBatchOperations')
}

const showSmartFilter = () => {
  emit('smartFilter')
}

const loadTransactions = () => {
  emit('loadTransactions')
}

const exportTransactions = () => {
  emit('exportTransactions')
}

const handleSmartCapture = () => {
  emit('handleSmartCapture')
}
</script>

<style scoped lang="scss">
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  
  .header-left {
    .page-title {
      margin: 0 0 12px 0;
      font-size: 24px;
      font-weight: 600;
      color: #1f2d3d;
    }
    
    .status-badges {
      display: flex;
      gap: 12px;
      
      .el-tag {
        display: flex;
        align-items: center;
        gap: 4px;
        font-weight: 500;
      }
    }
  }
  
  .header-actions {
    display: flex;
    gap: 0px;
    
    .help-icon {
      margin-left: 5px;
      color: #909399;
      cursor: help;
      vertical-align: middle;
    }
    
    // 移动端适配
    @media (max-width: 767px) {
      flex-wrap: wrap;
      gap: 8px;
      
      .el-button {
        flex: 1;
        min-width: 80px;
      }
    }
  }
}

.stats-row {
  margin-bottom: 20px;
}
</style>
